<script>
import moment from "moment";

export default {
  name: "vehicleIndex",
  data() {
    return {
      carList: [
        // {id: 1, name: '奔驰', time: new Date()},
        // {id: 2, name: '宝马', time: new Date()},
        // {id: 3, name: '特斯拉', time: new Date()},
      ],

      carId: '',
      carname: '',
      keytext: '',
      delIndex: '',
      oroginName: '',
      chnegeName: '',
      modifyIndex: '',


    }
  },
  methods: {
    // 存本地
    setData(){
      localStorage.setItem("key", JSON.stringify(this.carList))
    },
    // 添加
    addBtn() {
      let obj = {
        id: this.carId,
        name: this.carname,
        time: new Date(),
      }
      // console.log(this.carId)
      // console.log(this.carname)
      if (this.carId !== '' && this.carname !== '') {
        if (this.carList.some((item) => item.id == this.carId)) {
          alert('重复')
        } else {
          this.carList.push(obj)
        }
      } else {
        alert('请填写内容')
      }
      this.setData()
    },
    // 删除
    delBtn(item) {
      this.delIndex = this.carList.indexOf(item);
    },
    // 确认删除
    qrDel() {
      this.carList.splice(this.delIndex, 1)
      this.setData()

    },

    // 搜索
    search() {
      return this.carList.filter(item => {
        return item.name.includes(this.keytext)

      })
    }
    ,
    // 修改
    xg(item) {
      this.oroginName = item.name
      this.modifyIndex = this.carList.indexOf(item)
    },
    xgbtn() {
      this.carList[this.modifyIndex].name = this.chnegeName
      this.chnegeName = ''
      this.setData()

    },

  },

  filters: {
    setTime(data, format) {
      return moment(data).format(format)
    }
  },
  // 存缓存
  created(){
    this.carList = JSON.parse(localStorage.getItem("key"))||[]
    // console.log(this.carList)
  },
  // updated() {
  // },
}



</script>

<template>
  <div id="app">
    <div class="card">
      <!--      表单-->
      <div class="card-header">添加品牌</div>
      <div class="card-body">
        <form class="form-inline" style="margin: 15px 0">
          <label for="email">Id:</label>
          <input type="text" class="form-control" id="email" v-model="carId">
          <label for="pwd">Name:</label>
          <input type="text" class="form-control" id="pwd" v-model="carname">
          <button type="button" class="btn btn-primary" @click="addBtn">添加</button>
          <label for="keytext">搜索名称关键字:</label>
          <input @input="search" type="text" class="form-control" id="keytext" v-model="keytext">
        </form>
        <!--        表格-->
        <table class="table table-striped">
          <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in search()" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.Ctime | setTime('YYYY/MM/DD HH:mm:ss') }}</td>
            <td>
              <button data-toggle="modal" data-target="#myModal" type="button" class="btn btn-danger"
                      @click="delBtn(item,index)">删除
              </button>
              <button data-toggle="modal" data-target="#myModal2" type="button" class="btn btn-success"
                      @click="xg(item,index)">修改
              </button>
            </td>
          </tr>
          </tbody>
        </table>
        <!--        确认删除模态框-->
        <div class="modal fade" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content">
              <!-- 模态框主体 -->
              <div class="modal-body">
                确认删除吗？
              </div>
              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal" @click="qrDel">确认</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
        </div>
        <!--          修改模态框-->
        <div class="modal fade" id="myModal2">
          <div class="modal-dialog">
            <div class="modal-content">
              <!-- 模态框主体 -->
              <div class="modal-body">
                <div class="xg-box">
                  <label class="xglabel" for="carname">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字</label>:
                  <input id="carname" type="text" v-model="oroginName" class="oroginName">
                </div>
                <div class="xg-box">
                  <label class="xglabel" for="xgname">修改名字</label>:
                  <input id="xg" type="text" v-model="chnegeName">
                </div>

              </div>
              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal" @click="xgbtn">修改</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.modal-content {

  width: 380px;
}

.modal-body {
  margin: 0 auto;
}

.modal-footer {
  justify-content: space-evenly;
}

.xg-box {
  margin: 10px;
}

.xglabel {
  margin: 0;
  width: 72px;
}

.oroginName {
  outline: none;
  border: 0;
}

.btn-danger {
  margin: 5px;
}

.card {
  width: 1200px;
  margin: 0 auto;
}

.btn-primary {
  margin: 0 10px;
}

label {
  margin: 0 10px;
}
</style>